<template>
  <div class="w-full h-32 pl-10 pr-10">
    <CollapseContainer class="mt-5 w-200" title="效果展示">
      <p>从iconify上保存svg图片: <SvgIcon name="majesticons-car" /></p>
      <p>自定义颜色: <SvgIcon name="majesticons-car" color="red" /></p>
      <p>自定义大小: <SvgIcon name="majesticons-car" color="green" size="25" /></p>
      <p>其它:<SvgIcon name="test" /></p>
    </CollapseContainer>

    <!-- 笔记 -->
    <CollapseContainer class="mt-5" title="使用说明">
      <markdown-viewer :value="getDoc()" />
    </CollapseContainer>

    <!-- 源码 -->
    <CollapseContainer class="mt-5" title="源码">
      <markdown-viewer :value="getSource()" />
    </CollapseContainer>
  </div>
</template>
<script lang="ts" setup>
  import { CollapseContainer } from '@/components/Container';
  import { MarkdownViewer } from '@/components/Markdown';

  import { SvgIcon } from '@/components/Icon';
</script>

<script lang="ts">
  function getDoc() {
    return `

## SvgIcon
* SvgIcon 标签使用的是本地 src/assets/icons 目录中的 .svg 文件
* 如果希望将自定义图标保存到本地，则可以使用这种方式
* 官网: * <a href="https://doc.vvbin.cn/components/icon.html#svgicon" target="_blank">vben SvgIcon 官方文档</a>


## 常用属性

| 属性 | 类型 | 默认值 | 说明 | 示例 |
| :--- | :--- |  :--- |  :--- | :--- |
| name | string | | src/assets/icons 目录下的.svg文件名  | name="moon"  |
| size | number | 16 | 图标大小 | size="25" |
| color | string |  | 图标颜色: 如果svg文件支持，从 iconify 中下载的svg支持 | color="red" |

  `;
  }

  function getSource() {
    return `

\`\`\`html
\<template\>
  <p>从iconify上保存svg图片: <SvgIcon name="majesticons-car" /></p>
  <p>自定义颜色: <SvgIcon name="majesticons-car" color="red" /></p>
  <p>自定义大小: <SvgIcon name="majesticons-car" color="green" size="25" /></p>
  <p>其它:<SvgIcon name="test" /></p>
\</template\>

\<script lang="ts" setup\>

  import { SvgIcon } from '@/components/Icon';
}
\</script\>
\`\`\`
`;
  }
</script>
